var chartList;
var echartsPie = {
	pieChart: null, //圆环图对象
	init() {
		$.when(
			$.getJSON(BASEURL + 'statistics/article'), //志愿者风采（优秀志愿者）

		).done(function(res) {
			chartList = [
				{
					name: "教育服务",
					value: res.data.教育服务
				},
				{
					name: "文化服务",
					value: res.data.文化服务
				},{
					name: "理论宣讲",
					value: res.data.理论宣讲
				},
				{
					name: "体育健康",
					value: res.data.体育健康
				},
				{
					name: "科技科普",
					value: res.data.科技科普
				}
			];
			echartsPie.initPie();

		});
	},
	initPie() {
		this.pieChart = echarts.init(document.querySelector("#pieChart"));

		var chartLegend = [];
		var total = 0;
		chartList.forEach(function(v, i) {
			total += v.value;
			chartLegend.push({
				name: v.name
			})
		})

		var option = {
			color: ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"],
			grid: {
				top: '50%',   // 等价于 y: '16%'
				left: '2%',
				right: '15%',
				// bottom: '1%',
				containLabel: true
			},
			tooltip: {
				show: false,
				trigger: "item",
				confine: true, //是否将悬浮框限制在图例中
				// position: function(p) {
				// 	return [p[0] - 20, p[1] - 20];
				// },
				textStyle: {
					fontSize: 16
				},
				formatter: '{b}:{c} ({d}%)'
			},
			title: {
				text: '资讯',
				subtext: total,
				x: 'center',
				y: '42%',
				textStyle: {
					fontWeight: 'normal',
					fontSize: 12,
					color: '#fff'
				},
				subtextStyle: {
					fontWeight: 'normal',
					fontSize: 14,
					color: '#fff',
				}
			},
			legend: {
				show: false,
				orient: "vertical",
				x: "56%",
				y: "center",
				itemWidth: 12,
				itemHeight: 12,
				padding: 0,
				itemGap: 10,
				borderRadius: 5,
				align: "left",
				data: chartLegend,
				textStyle: {
					fontSize: 16,
					color: "#fff"
				}
			},
			series: [{
				type: "pie",
				hoverOffset: 3,
				radius: ["45%", "70%"],
				center: ["50%", "64%"],
				data: chartList,
				itemStyle: {
					normal: {
						label: {
							show: true
						},
						labelLine: {
							show: true
						}
					},
					emphasis: {
						label: {
							show: true,
							textStyle: {
								fontSize: 14,
								fontWeight: 'bold'
							}
						}
					},
				},
				label: {
					normal: {
						formatter: '{b}\n{c} ({d}%)',
						textStyle: {
							fontSize: 12
						}
					}
				},
				labelLine: {
					normal: {
						smooth: false, //boolen  number 表示线的平滑程度
						length: 6, //视觉引导线第一段的长度。
						length2: 12, //视觉引导线第二段的长度。
						lineStyle: {
							width: 1 //线宽
						}
					}
				}
			}]
		};

		this.pieChart.setOption(option);
		// this.auto(this.pieChart, option, 3000);
	},
	//组件轮播
	auto: function(obj, option, time) {
		var count = 0;
		var timeTicket = null;
		var dataLength = option.series[0].data.length;
		timeTicket && clearInterval(timeTicket);
		timeTicket = setInterval(function() {
			obj.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
			});
			obj.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: (count) % dataLength
			});
			obj.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: (count) % dataLength
			});
			count++;
		}, time);

		obj.on('mouseover', function(params) {
			clearInterval(timeTicket);
			obj.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
			});
			obj.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: (count) % dataLength
			});
			obj.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: (count) % dataLength,

			});
		});

		obj.on('mouseout', function(params) {
			timeTicket && clearInterval(timeTicket);
			timeTicket = setInterval(function() {
				obj.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
				});
				obj.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: (count) % dataLength
				});
				obj.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: (count) % dataLength
				});
				count++;
			}, time);
		});
	}
};